<template>
  <div class="index">
    <!-- 第一部分 -->
    <div class="content_one">
      <!-- 头像 -->
      <div class="head_Portrait">
        <img :src="userDetail.avatar" alt="">
      </div>
      <!-- 用户名、月卡已生效剩余天数 -->
      <div class="name">
        <div>
          {{ userDetail.username }}
          <img src="@/assets/images/personal_center/yue.png" alt="" v-if="userDetail.vip_card_status">
          <div v-if="userDetail.level_title">
            <img src="@/assets/images/personal_center/level_bg.png" alt="">
            <span>{{ userDetail.level_title }}</span>
          </div>
        </div>
        <div v-if="userDetail.vip_card_status">月卡已生效剩余<span style="color:#FF6A18;"> {{
            userDetail.vip_card_days
          }} </span>天
        </div>
        <div v-else>未激活月卡</div>
      </div>
      <!-- 设置 -->
      <div class="intercalate" @click="skipSettings">
        <!-- <i class="el-icon-setting"></i> -->
        <img src="@/assets/images/personal_center/fit.png" alt="">
      </div>
      <!-- 消息 -->
      <div class="message" @click="skipMyMessage">
        <!-- <i class="el-icon-chat-dot-square"></i> -->
        <img src="@/assets/images/personal_center/message.png" alt="">
        <div class="messageNums" v-if="messageCnt">{{ messageCnt }}</div>
      </div>
    </div>
    <!-- 第二部分 -->
    <div class="content_two">
      <div>
        <span>{{ userDetail.my_integral }}</span>
        <span>积分</span>
      </div>
      <div>
        <span>{{ userDetail.gm_cnt }}</span>
        <span>K金</span>
      </div>
      <div @click="skipMyCoupon">
        <span>{{ userDetail.coupon_cnt }}</span>
        <span>优惠券</span>
      </div>
    </div>
    <!-- 滚动条 -->
    <div class="scrollBar">
      <!-- 第三部分 -->
      <div class="content_three">
        <div v-for="item in list" :key="item.id" @click="skipItem(item.param)">
          <img :src="item.icon" alt="">
          <span>{{ item.apellation }}</span>
          <div class="cnt" v-if="item.id == 5 && customServiceCnt">{{ customServiceCnt }}</div>
        </div>
      </div>
      <!-- 第四部分 -->
      <!-- <div class="content_four">
        <div>福利加成</div>
        <div class="welfare_bonus">
          <div @click="goApp" v-for="item in welfareBonusList" :key="item.id">
            <img :src="item.icon" alt="">
            <span>{{ item.apellation }}</span>
          </div>
        </div>
      </div> -->
      <div class="content_four" v-if="shouldHideWelfareBonus">
        <div>福利加成</div>
        <div class="welfare_bonus">
          <div @click="goApp" v-for="item in welfareBonusList" :key="item.id">
            <img :src="item.icon" alt="">
            <span>{{ item.apellation }}</span>
          </div>
        </div>
      </div>
      <!-- 第五部分 -->
      <div class="content_five">
        <div>功能管理</div>
        <div>
          <div class="management" v-for="item in managementList" :key="item.id" @click="skip(item.param)">
            <span class="name">{{ item.name }}</span>
            <span class="manage">{{ item.manage }}</span>
            <img v-if="item.icon" :src="item.icon" alt="">
            <span class="version" v-else-if="item.version">{{ sdkVersion }}</span>
            <el-switch
              class="switch"
              v-else
              v-model="autoLogin"
              active-color="#13ce66">
            </el-switch>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :modal-append-to-body='false'
      :visible.sync="dialogVisible"
      :showClose="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="dialog"
      style="margin-top: 25vh;"
    >
      <h1>提示</h1>
      <div class="content">
        <span>
          {{ appContent }}
        </span>
      </div>
      <div class="buttons">
        <button @click="dialogVisible=false">取消</button>
        <button @click="skipApp">确认</button>
      </div>
    </el-dialog>
    <authentication :dialogVisible="status"/>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import * as api from '../../api/index'
import authentication from './authentication'

export default {
  name: 'index',
  components: {
    authentication
  },
  computed: {
    ...mapGetters([
      'baseInfo'
    ]),
    userDetail () {
      return this.$store.state.userDetail
    },
    shouldHideWelfareBonus() {
      // 假设 is_app_download 为 0 时隐藏福利加成部分
      return this.userDetail && this.userDetail.is_app_download;
    },
    messageCnt () {
      if (!this.userDetail) {
        return 0
      }
      return this.userDetail.msg_cnt
    },
    msgList () {
      return this.$store.state.msgList
    },
    isInstallApp () {
      if (!this.baseInfo.package_name) {
        return false
      }
      try {
        if (window.huo) {
          return window.huo.isInstallApplication(
            JSON.stringify({packageName: this.baseInfo.package_name})
          )
        } else if (window.micro) {
          return window.micro.isInstallApplication(
            JSON.stringify({packageName: this.baseInfo.package_name})
          )
        }
      } catch (e) {
        console.log(e)
      }
      return false
    },
    appContent () {
      if (window.huo && this.isiOS()) {
        return '登录后可参与每日答题，试玩有奖，超值月卡等多重福利，是否前往？'
      }
      if (this.isInstallApp) {
        return '登录APP可参与每日答题，试玩有奖，超值月卡等多重福利，是否前往？'
      }
      return '登录APP可参与每日答题，试玩有奖，超值月卡等多重福利，是否前往安装？'
    },
    sdkVersion () {
      return this.$store.state.sdkVersion
    },
    list () {
      if (this.baseInfo.game_type == 4) {
        return [
          {
            id: 1,
            icon: require('@/assets/images/personal_center/card.png'),
            apellation: '游戏优惠券',
            param: 'card'
          },
          {
            id: 2,
            icon: require('@/assets/images/personal_center/liwulihelibao@2x.png'),
            apellation: '游戏礼包',
            param: 'gamePackage'
          },
          {
            id: 4,
            icon: require('@/assets/images/personal_center/huodong@2x.png'),
            apellation: '游戏活动',
            param: 'playActivity'
          },
          // {
          //   id: 5,
          //   icon: require('@/assets/images/personal_center/kefuhdpi@2x.png'),
          //   apellation: '联系客服',
          //   param: 'customService'
          // }
        ]
      } else {
        return [
          {
            id: 1,
            icon: require('@/assets/images/personal_center/card.png'),
            apellation: '游戏优惠券',
            param: 'card'
          },
          {
            id: 2,
            icon: require('@/assets/images/personal_center/liwulihelibao@2x.png'),
            apellation: '游戏礼包',
            param: 'gamePackage'
          },
          {
            id: 3,
            icon: require('@/assets/images/personal_center/k.png'),
            apellation: '充值K金',
            param: 'kMoney'
          },
          {
            id: 4,
            icon: require('@/assets/images/personal_center/huodong@2x.png'),
            apellation: '游戏活动',
            param: 'playActivity'
          },
          // {
          //   id: 5,
          //   icon: require('@/assets/images/personal_center/kefuhdpi@2x.png'),
          //   apellation: '联系客服',
          //   param: 'customService'
          // }
        ]
      }
    },
  },
  data () {
    return {
      status: false,
      nums: 0,
      messageNums: 0,
      customServiceCnt: 0,
      integral: 0,
      kMoney: 0,
      coupon: 0,
      welfareBonusList: [
        {
          id: 1,
          icon: require('@/assets/images/personal_center/month-card.png'),
          apellation: '超值月卡'
        },
        {
          id: 2,
          icon: require('@/assets/images/personal_center/game.png'),
          apellation: '试玩有奖'
        },
        {
          id: 3,
          icon: require('@/assets/images/personal_center/mall.png'),
          apellation: '福利商城'
        },
        {
          id: 4,
          icon: require('@/assets/images/personal_center/xinbaniconshangchuan-@2x.png'),
          apellation: '每日答题'
        },
        {
          id: 5,
          icon: require('@/assets/images/personal_center/activity.png'),
          apellation: '平台活动'
        }
      ],
      managementList: [
        {
          id: 1,
          name: '我的小号',
          manage: '管理',
          icon: require('@/assets/images/personal_center/Shape@2x.png'),
          param: 'myTrumpet'
        },
        {
          id: 2,
          name: '切换账号',
          manage: '',
          icon: require('@/assets/images/personal_center/Shape@2x.png'),
          param: 'switchingAccount'
        },
        {
          id: 3,
          name: '订单记录',
          manage: '管理',
          icon: require('@/assets/images/personal_center/Shape@2x.png'),
          param: 'orderRecord'
        },
        {
          id: 4,
          name: '版本号',
          version: true,
        }
      ],
      dialogVisible: false,
      customConfig: false,
      autoLogin: false,
      addAutoLoginButton: false,
    }
  },
  watch: {
    userDetail () {
      this.checkAutoLogin()
    }
  },
  methods: {
    init () {
      if (this.userDetail.msg_cnt > 99) {
        this.userDetail.msg_cnt = '99+'
      }
      this.checkAutoLogin()
      ysf('onready', () => {
        this.configCustomService()
      })
      ysf('onunread', res => {
        if (res) {
          this.customServiceCnt = res.total
          if (this.customServiceCnt > 99) {
            this.customServiceCnt = '99+'
          }
        }
      })
    },
    checkAutoLogin () {
      if (window.huo) {
        if (this.addAutoLoginButton) {
          return
        }
        this.addAutoLoginButton = true
        this.autoLogin = !!window.huo.getAutoLogin()
        this.managementList.push({
          id: 5,
          name: '自动登录',
          manage: '',
          param: 'autoLogin'
        })
      }
    },
    switchingAccount () {
      try {
        if (window.huo) {
          let ua = navigator.userAgent
          let appData = ua.split('=')[1]
          if (appData) {
            window.parent.postMessage(JSON.stringify({
              type: 'back.app',
              value: ''
            }), '*')
          }
          window.huo.changeAccount()
        } else {
          window.parent.postMessage(JSON.stringify({
            type: 'member.logout',
            value: ''
          }), '*')
        }
      } catch (t) {
      }
    },
    skip (type) {
      switch (type) {
        case 'myTrumpet':
          this.$router.push({path: '/me/myTrumpet'})
          break
        case 'switchingAccount':
          this.switchingAccount()
          break
        case 'orderRecord':
          this.$router.push({path: '/me/orderRecord'})
          break
        case 'autoLogin':
          try {
            if (window.huo) {
              window.huo.autoLogin(this.autoLogin)
              this.autoLogin = !!window.huo.getAutoLogin()
            } else {
              this.autoLogin = false
            }
          } catch (t) {
            this.autoLogin = false
          }
          break
      }
    },
    // 跳转到我的优惠券
    skipMyCoupon () {
      this.$router.push({path: '/me/myCoupon'})
    },
    // 跳转到个人设置
    skipSettings () {
      this.$router.push({path: '/me/settings'})
    },
    // 跳转到我的消息
    skipMyMessage () {
      this.$router.push({path: '/me/myMessage'})
    },
    // 跳转卡券、游戏礼包、充值等操作
    skipItem (type) {
      switch (type) {
        case 'card':
          this.$router.push({path: '/me/coupon'})
          break
        case 'gamePackage':
          this.$router.push({path: '/me/gamePackage'})
          break
        case 'playActivity':
          this.$router.push({path: '/me/playActivity'})
          break
        case 'kMoney':
          this.$router.push({path: '/me/gmpay'})
          break
        case 'customService':
          this.openCustomService()
          break
      }
    },
    configCustomService (open = false) {
      api.getServiceUploadInfo(
        res => {
          let that = this
          ysf('config', {
            uid: res.mem.mem_id,      // 用户Id
            name: res.mem.nickname,          // 用户名称
            email: res.mem.email, // 用户邮箱
            mobile: res.mem.mobile,  // 用户电话
            data: JSON.stringify(res.data),
            level: 1, // vip级别
            success: function () {
              that.customConfig = res
              open && that.openCustomService()
            },
            error: function () {
              that.customConfig = false
            }
          })
        }, () => {

        }
      )
    },
    openCustomService () {
      if (this.customConfig) {
        if (window.huo) {
          //如果是推广员，并且设置了客服二维码
          if(this.userDetail.agent_id){
            window.location.href = this.userDetail.kefu_qrcode //跳转后台上传的客服二维码
          }else{
            window.location.href = 'https://work.weixin.qq.com/kfid/kfc2a7aa3694d9f2ae0' //默认打开微信跳转 
            // if (this.isiOS()) {
            //   //this.$router.push({path: '/web/index', query: {url: ysf('url')}})
            //   window.location.href = 'https://oss.icgzz.com/upload/admin/20241212/67c1be3bb6a03f3095749595c4650b66.png' //iOS默认打开图片跳转 
            // } else {
            //   //window.location.href = ysf('url')
            //   window.location.href = 'https://work.weixin.qq.com/kfid/kfc2a7aa3694d9f2ae0' //默认打开微信跳转 
            // }
          }

        } else {
          ysf('open')
        }
        this.customServiceCnt = 0
      } else {
        this.configCustomService(true)
      }
    },
// 唤醒app
    goApp () {
      this.dialogVisible = true
    },
// 福利加成跳转安装app
    skipApp () {
      this.dialogVisible = false
      if (this.isInstallApp) {
        let isOpened
        if (window.huo && window.huo.openApp) {
          isOpened = window.huo.openApp(this.baseInfo.package_name)
          if (isOpened !== '1') {
            this.Toast('打开失败', 500)
          }
        } else if (window.micro && window.micro.openApp) {//微端
          isOpened = window.micro.openApp(this.baseInfo.package_name)
          if (isOpened !== '1') {
            this.Toast('打开失败', 500)
          }
        }
      } else {
        let downUrl = this.baseInfo.app_down_url
        try {
          let data = JSON.stringify({url: downUrl})
          //打开app下载页面
          if (window.huo) {
            window.huo.outWeb(data)
          } else if (window.micro) {//微端
            window.micro.outWeb(data)
          } else {
            window.location.href = downUrl
          }
        } catch (e) {
          window.location.href = downUrl
        }
      }
    }
  },
  created () {
    this.$store.dispatch('getUserDetail')
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.index {
  padding: 0.43rem 0.4rem;

  .content_one {
    display: flex;
    align-items: center;

    .head_Portrait {
      width: 1.31rem;
      height: 1.31rem;
      margin-right: 3.5%;

      img {
        width: 100%;
        height: 100%;
        border-radius: 3.05rem;
      }
    }

    .name {
      flex: 1;

      > div:nth-child(1) {
        font-size: 0.4rem;
        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
        font-weight: bold;
        color: #050608;
        margin-bottom: 0.16rem;
        display: flex;

        img {
          width: 0.37rem;
          height: 0.4rem;
          margin-left: 0.1rem;
        }

        div {
          display: flex;

          img {
            width: 0.97rem;
            height: 0.4rem;
          }

          span {
            font-size: 0.20rem;
            height: 0.4rem;
            width: 0.97rem;
            line-height: 0.4rem;
            color: white;
            margin-left: -0.8rem;
            display: block;
            text-align: center;
          }
        }
      }

      > div:nth-child(2) {
        font-size: 0.29rem;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #999999;
      }
    }

    .intercalate {
      text-align: center;
      width: 0.53rem;
      // height: 0.48rem;
      font-size: 50px;
      margin-right: 0.61rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .message {
      text-align: center;
      width: 0.53rem;
      height: 0.48rem;
      font-size: 40px;
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }

      .messageNums {
        width: 0.45rem;
        height: 0.27rem;
        position: absolute;
        top: -0.1rem;
        right: -0.25rem;
        height: 0.27rem;
        line-height: 0.27rem;
        background: #FF3C3C;
        border-radius: 0.15rem;
        font-size: 0.21rem;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }

  .content_two {
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin: 0.37rem auto;

    > div {
      display: flex;
      flex-direction: column;
    }

    > div span:nth-child(1) {
      font-size: 0.4rem;
      font-family: SourceHanSansCN-Bold, SourceHanSansCN;
      font-weight: bold;
      color: #050608;
      margin-bottom: 0.19rem;
    }

    > div span:nth-child(2) {
      font-size: 0.32rem;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #999999;
    }
  }

  .scrollBar {
    height: 8.8rem;
    overflow: scroll;
  }

  .scrollBar::-webkit-scrollbar {
    width: 0 !important
  }

  .content_three {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 9.2rem;
    height: 2.24rem;
    background: rgba($color: #FFFFFF, $alpha: 0.6);
    border-radius: 0.21rem;

    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      img {
        width: 0.83rem;
        height: 0.8rem;
        margin-bottom: 0.21rem;
      }

      span {
        font-size: 0.27rem;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #363739;
      }

      .cnt {
        background: #FF5167;
        padding: 0 0.069444rem;
        height: 0.222222rem;
        border-radius: 0.347222rem;
        top: 0px;
        position: absolute;
        right: 0px;
        text-align: center;
        font-size: 0.18rem;
        color: #fff;
        line-height: 0.222222rem;
      }
    }
  }

  .content_four {
    width: 9.2rem;
    // height: 2.64rem;
    background: rgba($color: #FFFFFF, $alpha: 0.59);
    border-radius: 0.21rem;
    margin: 0.32rem auto;
    padding: 0.35rem 0.4rem 0.48rem 0.4rem;

    > div:nth-child(1) {
      height: 0.35rem;
      font-size: 0.35rem;
      font-family: SourceHanSansCN-Bold, SourceHanSansCN;
      font-weight: bold;
      color: #363739;
      line-height: 0.35rem;
      margin-bottom: 0.45rem;
    }

    > .welfare_bonus {
      display: flex;
      align-items: center;
      justify-content: space-between;

      > div {
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
          width: 0.59rem;
          height: 0.53rem;
          margin-bottom: 0.21rem;
        }

        span {
          font-size: 0.27rem;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #363739;
        }
      }
    }
  }

  .content_five {
    width: 9.2rem;
    background: rgba($color: #FFFFFF, $alpha: 0.6);
    border-radius: 0.21rem;
    padding: 0.35rem 0.4rem 2rem 0.4rem;

    > div:nth-child(1) {
      height: 0.35rem;
      font-size: 0.35rem;
      font-family: SourceHanSansCN-Bold, SourceHanSansCN;
      font-weight: bold;
      color: #363739;
      line-height: 0.53rem;
      margin-bottom: 0.45rem;
    }

    > div:nth-child(2) {
      display: flex;
      flex-direction: column;

      .management {
        display: flex;
        align-items: center;
        height: 1.17rem;

        .name {
          font-size: 0.32rem;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #363739;
          flex: 1;
        }

        .manage, .version {
          font-size: 0.29rem;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #999999;
        }

        img {
          width: 0.16rem;
          height: 0.24rem;
          margin-top: 0.65%;
          margin-left: 0.13rem;
        }

        /deep/ .el-switch__core {
          width: 0.8rem !important;
          height: 0.4rem;
          border-radius: 0.4rem;
        }

        /deep/ .el-switch__core:after {
          width: 0.3rem;
          height: 0.3rem;
          left: 0.02rem;
          top: 0.02rem;
        }

        /deep/ .el-switch.is-checked .el-switch__core::after {
          left: 88%;
        }
      }
    }
  }

  .dialog {
    /deep/ .el-dialog {
      width: 5.97rem;
      height: 4.67rem;
      background: #FFFFFF;
      border-radius: 0.27rem;
      margin-left: 2.03rem;
      margin-bottom: 0.67rem;

      h1 {
        font-size: 0.37rem;
        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
        font-weight: bold;
        color: #181818;
        margin-bottom: 0.2rem;
        text-align: center;
      }

      .content {
        width: 4.8rem;
        margin: auto;
        word-wrap: break-word;
        word-break: break-all;
        // overflow: scroll;
        span {
          font-size: 0.32rem;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #888888;
          line-height: 0.59rem;
        }
      }

      .buttons {
        margin-top: 0.72rem;
        margin-bottom: 0.32rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // text-align: center;
        > button {
          width: 2.48rem;
          height: 0.85rem;
          border-radius: 0.53rem;
          font-size: 0.37rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
        }

        > button:nth-child(1) {
          background: #F5F5F5;
          color: #333333;
        }

        > button:nth-child(2) {
          background: #FF0300;
          color: #FFFFFF;
        }
      }
    }

    /deep/ .el-dialog__header {
      padding: 0;
    }

    /deep/ .el-dialog__body {
      padding: 0.51rem 0.32rem 0 0.32rem;
    }

    /deep/ .el-dialog__wrapper {
      top: auto;
    }
  }
}
</style>
